<script lang="ts" setup>
import { ref } from 'vue'
import { useLevelStore } from "@/store/level"
import { subjectDelete, subjectPage, type SubjectType } from "@/api/education"
import router from '@/router'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表单参数
const formInline = ref({
    level: "",  //年级
    pageIndex: 1,
    pageSize: 10
})

// 总页数
const total = ref(0)

// pinia的数据
const levelStore = useLevelStore()

// 表单数据
const tableData = ref<SubjectType[]>([])

// 获取列表接口
function getList() {
    subjectPage(formInline.value).then(res => {
        console.log(res, "subject");
        if (res.code === 1) {
            tableData.value = (res.response?.list as SubjectType[])
            total.value = (res.response?.total as number)
        }
    })
}
getList()

// 每页大小的变化
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    formInline.value.pageSize = val;
    getList()
}

// 当前页数修改
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    formInline.value.pageIndex = val;
    getList()
}

// 搜索
const onSubmit = () => {
    console.log('submit!')
    console.log(formInline.value);
    getList()
}
function handleAdd() {
    router.push('/subject/edit')
}
function handleEdit(id: number) {
    router.push('/subject/edit?id=' + id)
}
function handleDel(id: number) {
    ElMessageBox.confirm(
        '确认要删除?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        subjectDelete(id).then(res => {
            if (res.code === 1) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                    duration: 1000,
                    onClose() {
                        getList()
                    }
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
            duration: 1500
        })
    })
}
</script>

<template>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="年级：">
            <el-select clearable v-model="formInline.level" placeholder="年级" style="width: 240px">
                <el-option v-for="item in levelStore.list" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="学科" />
        <el-table-column prop="levelName" label="年级" />
        <el-table-column>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
            :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>